<script setup>
import { ref } from 'vue';

const active = ref(0);
// const icon = {
//       active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
//       inactive:
//         'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
//     };

</script>

<template>
    <van-tabbar v-model="active" route  >

        <van-tabbar-item to="/nowPlaying" icon="home-o">
            <span>电影</span>
            <template #icon="props">
                <i class="iconfont icon-dianying"></i>
            </template>
        </van-tabbar-item>

        <van-tabbar-item to="/cinema" icon="search">
            <span>影院</span>
            <template #icon="props">
                <i class="iconfont icon-wode"></i>
            </template>
        </van-tabbar-item>

        <van-tabbar-item to="/random" icon="friends-o">
            <span>盲盒</span>
            <template #icon="props">
                <i class="iconfont icon-yingyuan"></i>
            </template>
        </van-tabbar-item>

        <van-tabbar-item to="/my" icon="setting-o">
            <span>我的</span>
            <template #icon="props">
                <i class="iconfont icon-manghe"></i>
            </template>
        </van-tabbar-item>

    </van-tabbar>

</template>

<style scoped lang="less">
.van-tabbar .iconfont {
    font-size: 30px;
}

.van-tabbar-item{

    .iconfont {
        color: @inacColor;
    }
    :deep(.van-tabbar-item__text){
        color: @inacColor !important;
    }
    &.van-tabbar-item--active{
        .iconfont {
        color: @primaryColor;
    }
    :deep(.van-tabbar-item__text){
        color: @primaryColor !important;
    }
    }

}


</style>